<!-- 添加咨询者 -->
<template>
  <section class="add">
    <el-form ref="form" :model="form" label-width="100px" :rules="rules">
      <el-form-item label="姓名" prop="studentName">
        <el-input v-model="form.studentName" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="cardId">
        <el-input v-model="form.cardId" placeholder="请输入身份证号"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio v-model="form.sex" label="男">男</el-radio>
        <el-radio v-model="form.sex" label="女">女</el-radio>
      </el-form-item>
      <el-form-item label="手机号" prop="tel">
        <el-input v-model="form.tel" placeholder="请输入手机号" ></el-input>
      </el-form-item>

      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pwd">
        <el-input v-model="form.pwd" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit()">立即创建</el-button>
        <el-button type="text" @click="cancel()">取消</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  export default {
    data () {
      let checkRegNo = ( rule , value , callback ) => {
        setTimeout ( () => {
          const rr = /^[1-9]\d{1}(.{13}|.{16})$/
          if ( rr.test ( value ) ) {
            if ( value.length == 18 ) {
              //加权因子
              let weight_factor = [7 , 9 , 10 , 5 , 8 , 4 , 2 , 1 , 6 , 3 , 7 , 9 , 10 , 5 , 8 , 4 , 2]
              // 校验位
              let check_code = [1 , 0 , 'X' , 9 , 8 , 7 , 6 , 5 , 4 , 3 , 2]
              let idWiSum = 0
              for ( let i = 0 ; i < 17 ; i ++ ) {
                idWiSum += value.substring ( i , i + 1 ) * weight_factor[ i ]
              }
              //计算模
              let idMod = idWiSum % 11
              let idLastCode = check_code[ idMod ]
              if ( value[ 17 ] == idLastCode ) {
                callback
              }
              callback ( new Error ( '身份证最后一位校验码不正确' ) )
            }
          } else {
            callback ( new Error ( '身份证仅能为15位或18位且前两位为有效行政区划代码' ) )
          }
        } , 1000 )
      }

      let checkTel = ( rule , value , callback ) => {
          this.$axios ({
          url: '/api/checkTel',
          method: 'get',
          params: {
            tel:this.form.tel
          }
        }).then(({data}) => {
          if (data) {
            callback()
          } else {
            callback(new Error('手机号已存在'))
          }
        })
      }
      return {

        form : { //表单数据初始化
          studentName : null ,
          grade : null ,
          major : null ,
          clazz : null ,
          institute : null ,
          tel : null ,
          email : null ,
          pwd : null ,
          cardId : null ,
          sex : null ,
          role : 2
        } ,
        // 表单校验
        rules : {
          studentName : [
            { required : true , message : "姓名不能为空" , trigger : "blur" }
          ] ,
          cardId : [
            { required : true , message : "身份证号不能为空" , trigger : "blur" }
          ] ,
          pwd : [
            { required : true , message : "用户密码不能为空" , trigger : "blur" } ,
            { min : 5 , max : 20 , message : '用户密码长度必须介于 5 和 20 之间' , trigger : 'blur' }
          ] ,
          email : [
            {
              type : "email" ,
              message : "请输入正确的邮箱地址" ,
              trigger : ["blur" , "change"] ,
              required : true
            }
          ] ,
          tel : [
            {
              pattern : /^1[3|4|5|6|7|8|9][0-9]\d{8}$/ ,
              message : "请输入正确的手机号码" ,
              trigger : "blur" ,
              required : true
            },
            { validator: checkTel }
          ]
        }
      };
    } ,
    methods : {
      onSubmit () { //数据提交
        this.$refs[ "form" ].validate ( valid => {
          if ( valid ) {
            this.$axios ( {
              url : '/api/student' ,
              method : 'post' ,
              data : {
                ... this.form
              }
            } ).then ( res => {
              if ( res.data.code == 200 ) {
                this.$message ( {
                  message : '数据添加成功' ,
                  type : 'success'
                } )
                this.$router.push ( { path : '/studentManage' } )
              }
            } )
          }
        } )
      } ,
      cancel () { //取消按钮
        this.$refs.form.resetFields ()
      }

    } ,
    activated () {
      this.cancel ()
    }
  };
</script>
<style lang="scss" scoped>
  .add {
    padding: 0px 40px;
    width: 400px;
  }
</style>

